<template>
    <div class="home">
        <table class="table file-cover-evaluation" id="table">
                <thead>
                    <tr>
                        <th>年级/分数</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th class="rgbhead">英语</th>
                        <th class="rgbhead">道法</th>
                        <th class="rgbhead">体育</th>
                        <th class="rgbhead">德育</th>
                        <th class="rgbhead">道法</th>
                        <th class="rgbhead">体育</th>
                        <th class="rgbhead">德育</th>

                    </tr>
                </thead>
                <tbody ref="tbody">
                    <tr ref="elementTr" v-for="v in 6" :key="v"
                        :class="{ active:true}" :style="{ border: true? 'none' : '' }" >
                        <td  class="font-family">
                            hello
                         <div class="activeTd"></div>
                        </td>

                        <td>
                            <div style="display:flex;align-items: center;justify-content: space-evenly;">
                                <div style="width: 44px;">小王</div>
                            </div>
                        </td>
                        <td>
                            <div style="display:flex;align-items: center;justify-content: space-evenly;">
                                <div style="width: 44px;">小王</div>
                            </div>
                        </td>
                        <td>
                            <div style="display:flex;align-items: center;justify-content: space-evenly;">
                                <div style="width: 44px;">小王</div>
                            </div>
                        </td>
                        <td v-for="v in 4" :key="v">
                            <div style="display:flex;align-items: center;justify-content: space-evenly;">
                                <div style="width: 44px;">小王</div>
                            </div>
                        </td>
                        <td class="tdbox" style="text-align: left">
                            <template v-if="true">
                                <div class="evalbtn" style="text-align:center">评价</div>
                            </template>
                            <!-- <el-input ref="textarea" :autosize="{ minRows: 2 }" placeholder="请输入评语"  class="demo" /> -->
                        </td>
                        <td  id="newTd" class="rgbhead">
                            <div style="text-align: center" class="rgbnew">课程表</div>
                            <!-- <div  style="text-align: center">--</div> -->
                        </td>
                    </tr>
                </tbody>
        </table>
    </div>
</template>

<script lang="ts">

</script>


<style scoped>

.table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}

tr { height: 60px; }

td,th{border: 1px solid #CDDAF8;}
  
thead tr {
    height: 40px;
    letter-spacing: 1px;
    background: #a9c2eb;
}

tbody  tr {
    cursor: pointer;
    background: #E9F0FB;
}

tbody  td {
    position: relative;
    text-align: center;
}

tbody td:first-child  { 
    position: relative;
    background: #F6F8FE;
}

tbody td:first-child  .activeTd {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border: 7px solid #FFBF00;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    z-index: 99;
}
td,th {
    width: 30px !important;
}


</style>
  